<!DOCTYPE html>
<html class="full-height" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer">
    <title>ANOYI 轻量级微服务架构</title>
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">
    <link href="/css/home.css" rel="stylesheet">
    <link href="/css/toastr.css" rel="stylesheet">
</head>

<body class="creative-lp">

<!-- Navigation & Intro -->
<header>

    <!-- 顶部导航 -->
    <nav th:replace="~{common :: nav}"></nav>

    <!--Intro Section-->
    <section class="view intro-2">

        <img src="https://upload-images.jianshu.io/upload_images/3424642-ecf3834fc29d5c68.png" width="100%" alt="">

        <!--background: url("https://upload-images.jianshu.io/upload_images/3424642-ecf3834fc29d5c68.png") no-repeat center center;-->

        <div class="full-bg-img">
            <div class="mask rgba-gradient-1">
                <div class="container flex-center">
                    <div class="row flex-center">
                        <div class="col-md-10 col-lg-6 text-center text-md-left margins">
                            <div class="white-text">
                                <h1 class="h1-responsive font-weight-bold mt-sm-5 mb-4 wow fadeInLeft" data-wow-delay="0.3s">轻量级微服务架构实践</h1>
                                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">
                                    组件轻量、服务松耦合、弹性伸缩、性能卓越、安全性高、可用性高、快速迭代，敏捷开发团队首选！
                                </h6>
                                <br>
                                <a href="https://github.com/ChinaSilence/micro" target="_blank" class="btn pink-gradient btn-rounded btn-lg font-weight-bold wow fadeInLeft" data-wow-delay="0.4s">开始体验</a>
                                <a class="btn btn-white btn-rounded btn-lg orange-text font-weight-bold ml-lg-0 wow fadeInLeft" data-wow-delay="0.4s">
                                    <i class="fa fa-play-circle orange-text mr-2" aria-hidden="true"> </i> 观看演示</a>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-8clearfix d-none d-md-block wow fadeInRight justify-content-center" data-wow-delay="0.3s">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-632dd49994e5d071.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</header>
<!-- Navigation & Intro -->

<!-- Main content -->
<main>

    <div class="container">

        <!-- Section: About 1-->
        <section id="about" class="section about mt-5 mb-5 py-3 wow fadeIn" data-wow-delay="0.2s">

            <!-- Grid row -->
            <div class="row pt-2 mt-lg-5">

                <!-- Grid column -->
                <div class="col-lg-6 col-md-12 mb-3 wow fadeIn" data-wow-delay="0.4s">
                    <!-- Image -->
                    <img src="https://upload-images.jianshu.io/upload_images/3424642-55c528d9764be3b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="img-fluid rounded" alt="My photo">
                </div>
                <!-- Grid column -->

                <!-- Grid column -->
                <div class="col-lg-6 ml-auto col-md-12 wow fadeIn" data-wow-delay="0.4s">

                    <!-- Secion heading -->
                    <h2 class="mb-5 title font-weight-bold wow fadeIn" data-wow-delay="0.2s">
                        <strong>Overview</strong>
                    </h2>

                    <!-- Description -->
                    <p align="justify" class="grey-text">
                        本站旨在利用 Github 上顶级的开源项目，构建安全、稳定、可靠的轻量级微服务架构，相关技术会记录到博客。
                    </p>
                    <p class="grey-text">
                        架构分为两个部分：基础服务和应用服务。基础服务包含容器编排平台、CI/CD、代码仓库、日志中心、监控中心、配置中心等等；应用服务包含各种业务场景的案例，比如 REST API、Security、RPC、WebSocket、分布式事务的应用。基础服务为应用服务的提供保障！
                    </p>
                </div>
                <!-- Grid column -->

            </div>
            <!-- Grid row -->

        </section>
        <!-- Section: About 1 -->

        <hr>

        <!-- Section: Features v.4 -->
        <section id="features" class="section feature-box mb-5 mt-5 pb-4">

            <!--Grid row-->
            <div class="row features wow fadeIn" data-wow-delay="0.2s">

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-eb3abe8363088f98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://www.docker.com/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Docker</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Docker 让应用程序布署在软件容器下的工作可以自动化进行，借此在Linux操作系统上，提供一个额外的软件抽象层，以及操作系统层虚拟化的自动管理机制。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-6810a3d7d58f1bad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://kubernetes.io/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Kubernetes</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Kubernetes 是用于自动部署、扩展和管理容器化应用程序的开源系统。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-f26aa86583044358.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://istio.io/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Istio</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Istio 用于统一集成微服务、管理跨微服务的流量、实施策略和聚合遥测数据。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-cd45b59ff4041cf3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://spring.io/projects/spring-boot" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Spring Boot</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">通过 Spring Boot 可以轻松创建独立的、生产级别的应用程序，大多数 Spring Boot 应用仅需要很少的配置即可运行。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-23be2c6b221a9f32.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3" style="max-height: 100px">
                        </div>
                        <a href="https://cn.vuejs.org/index.html" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Vue</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Vue 是一套用于构建用户界面的渐进式框架，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-54bc0d24196af0ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://www.nginx.com/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Nginx</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Nginx 是一个异步框架的 Web 服务器，也可用作反向代理、负载均衡器和 HTTP 缓存。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-b419b2cd211426fc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://www.rabbitmq.com/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">RabbitMQ</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">RabbitMQ 轻量级消息中间件，支持多种消息传递协议，可以部署在分布式环境中，以满足大规模、高可用的需求。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-74bb3d4076a7017a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://grpc.io/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">GRPC</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">高性能、开源、通用的RPC框架。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-dc3848531869c7b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://www.elastic.co/cn/products/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Elastic Stack</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Elasticsearch、Kibana、Logstash、Beats、ECE、Logging、Metrics、APM、Site Search、Security</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-a62325d2dbedc3dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://www.ansible.com/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Ansible</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Ansible 是由 Red Hat 赞助的开源社区项目，它是实现自动化运维的最简单方法。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-e54398267aaa04bc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://prometheus.io/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Prometheus</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">Prometheus 是开源的系统、服务监控工具，在给定时间间隔内收集指标、评估规则表达式、校验条件触发警报。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-lg-4 text-center mb-4">
                    <div class="icon-area">
                        <div class="circle-icon">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-4debc5f66d7de96c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" class="avatar px-3 py-3"  style="max-height: 100px">
                        </div>
                        <a href="https://grafana.com/" target="_blank"><h5 class="dark-grey-text font-weight-bold mt-2">Grafana</h5></a>
                        <div class="mt-1">
                            <p class="mx-3 grey-text">用于 Graphite、InfluxDB 和 Prometheus 等数据源的监控、度量分析和仪表板的工具。</p>
                        </div>
                    </div>
                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->

        </section>
        <!-- Section: Features v.4 -->


    </div>

    <div class="container-fluid" style="background-color: #f4f4fa">
        <div class="container py-4">

            <!--Section: Services-->
            <section class="section mt-3 mb-3 pb-3">

                <!-- Section heading -->
                <h3 class="text-center title my-5 pt-4 pb-5 dark-grey-text font-weight-bold wow fadeIn" data-wow-delay="0.2s">
                    <strong>快速开始</strong>
                </h3>

                <!-- First row -->
                <div class="row wow fadeIn" data-wow-delay="0.4s">

                    <!-- First column -->
                    <div class="col-md-4 mb-5 text-center">

                        <!--Panel-->
                        <div class="card card-body text-left white hoverable">
                            <p class="feature-title title font-weight-bold dark-grey-text text-uppercase spacing mt-4 mx-4">
                                <i class="fa fa-square orange-text mr-2" aria-hidden="true"></i>
                                <strong>01 搭建集群</strong>
                            </p>
                            <p class="grey-text font-small mx-4">
                                准备多台服务器，搭建 <a href="https://www.jianshu.com/p/832bcd89bc07" target="_blank">kubernetes</a> 集群
                            </p>
                        </div>
                        <!--/.Panel-->

                    </div>
                    <!-- /First column -->

                    <!-- Second column -->
                    <div class="col-md-4 mb-5 text-center">

                        <!--Panel-->
                        <div class="card card-body text-left white hoverable">
                            <p class="feature-title title font-weight-bold dark-grey-text text-uppercase spacing mt-4 mx-4">
                                <i class="fa fa-square orange-text mr-2" aria-hidden="true"></i>
                                <strong>02 部署基础服务</strong>
                            </p>
                            <p class="grey-text font-small mx-4">
                                从 <a href="https://github.com/ChinaSilence/micro" target="_blank">Github</a> 下载源码，部署到集群
                            </p>
                        </div>
                        <!--/.Panel-->

                    </div>
                    <!-- /.Second column -->

                    <!-- Third column -->
                    <div class="col-md-4 mb-5 text-center">

                        <!--Panel-->
                        <div class="card card-body text-left white hoverable">
                            <p class="feature-title title font-weight-bold dark-grey-text text-uppercase spacing mt-4 mx-4">
                                <i class="fa fa-square orange-text mr-2" aria-hidden="true"></i>
                                <strong>03 部署应用服务</strong>
                            </p>
                            <p class="grey-text font-small mx-4">
                                暂未开放，<code>敬请期待！</code>
                            </p>
                        </div>
                        <!--/.Panel-->

                    </div>
                    <!-- /.Third column -->

                </div>
                <!-- /.First row -->

            </section>
            <!--/Section: Services-->

        </div>
    </div>
    <!--Second container-->

    <div class="container">

        <!-- Section: Team v.1 -->
        <section class="section team-section pb-5" id="team">

            <!-- Section heading -->
            <h3 class="text-center title my-5 py-4 dark-grey-text font-weight-bold wow fadeIn" data-wow-delay="0.2s">
                <strong>社交网络</strong>
            </h3>
            <!-- Section description -->
            <p class="section-description">

            </p>

            <div class="row mt-5 pt-5">

                <!-- Self -->
                <div class="col-lg-4 col-md-12 mb-5">
                    <div class="card testimonial-card">
                        <div class="card-up pink-gradient"></div>
                        <div class="avatar mx-auto white">
                            <img src="https://upload.jianshu.io/users/upload_avatars/3424642/fb55f16faaf6.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" class="rounded-circle img-responsive">
                        </div>
                        <div class="card-body">
                            <h4 class="mt-1">
                                <strong>Anoyi</strong>
                            </h4>
                            <hr>
                            <p class="dark-grey-text">天天交学费的工程师</p>
                        </div>
                    </div>
                </div>

                <!-- QQ Group -->
                <div class="col-lg-4 col-md-12 mb-5">
                    <div class="card testimonial-card">
                        <div class="card-up pink-gradient">
                        </div>
                        <div class="avatar mx-auto white">
                            <img src="https://upload-images.jianshu.io/upload_images/3424642-825586c429172b56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" class="rounded-circle img-responsive">
                        </div>
                        <div class="card-body">
                            <h4 class="mt-1">
                                <strong>Freedom Engineer</strong>
                            </h4>
                            <hr>
                            <p class="dark-grey-text">热闹的工程师Q群：481678152</p>
                        </div>
                    </div>
                </div>

                <!-- Anonymous -->
                <div class="col-lg-4 col-md-12 mb-5">
                    <div class="card testimonial-card">
                        <div class="card-up  pink-gradient"></div>
                        <div class="avatar mx-auto white">
                            <img src="https://upload.jianshu.io/users/upload_avatars/2172284/d0ad0509a627.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" class="rounded-circle img-responsive">
                        </div>

                        <div class="card-body">
                            <h4 class="mt-1">
                                <strong>Anonymous</strong>
                            </h4>
                            <hr>
                            <p class="dark-grey-text">程序员鼓励师</p>
                        </div>

                    </div>
                </div>

                <!-- Links -->
                <div class="col-lg-4 col-md-12 mb-5 mt-4" th:each="link : ${links}">
                    <div class="card testimonial-card">
                        <div class="card-up  blue-gradient"></div>

                        <!--Avatar-->
                        <div class="avatar mx-auto white">
                            <a th:href="${link.url}" target="_blank"><img th:src="${link.logo}" class="rounded-circle img-responsive"></a>
                        </div>

                        <div class="card-body">
                            <!--Name-->
                            <h4 class="mt-1">
                                <a th:href="${link.url}" target="_blank"><strong th:text="${link.name}"></strong></a>
                            </h4>
                            <hr>
                            <!--Description-->
                            <p class="dark-grey-text" th:text="${link.desc}"></p>
                        </div>
                    </div>
                </div>

            </div>

        </section>
        <!-- Section: Team v.1 -->

    </div>

    <!-- Streak -->
    <div class="streak streak-photo streak-md">
        <div class="flex-center mask rgba-gradient">
            <div class="container my-5">

                <!-- Section heading -->
                <h3 class="text-center pb-3 white-text font-weight-bold wow fadeIn" data-wow-delay="0.2s">
                    <strong>如何成为贡献者</strong>
                </h3>
                <h6 class="text-center white-text pb-4 font-weight-bold wow fadeIn" data-wow-delay="0.2s">Show me your code!</h6>
                <!--First row-->
                <div class="row flex-center">

                    <a class="btn btn-white btn-rounded btn-lg orange-text font-weight-bold ml-0 wow fadeIn" data-wow-delay="0.2s" href="https://github.com/ChinaSilence" target="_blank">
                        <i class="fa fa-github pr-2" aria-hidden="true"></i> Github 地址</a>
                    <a class="btn btn-white btn-rounded btn-lg orange-text font-weight-bold wow fadeIn" data-wow-delay="0.2s" href="https://gitee.com/anoyi" target="_blank">
                        <i class="fa fa-gitlab pr-2" aria-hidden="true"></i> 码云地址</a>
                </div>
                <!--First row-->

            </div>
        </div>
    </div>
    <!-- Streak -->

    <!-- Section: Contact v.2 -->
    <div class="container">

        <section id="contract" class="section mb-5">

            <!--Section heading-->
            <h2 class="section-heading title h1 pt-4">联系作者</h2>
            <!--Section description-->
            <p class="section-description">

            </p>

            <div class="row pt-5">

                <!--Grid column-->
                <div class="col-md-8 col-xl-9">
                    <form>

                        <!--Grid row-->
                        <div class="row">

                            <!--Grid column-->
                            <div class="col-md-6">
                                <div class="md-form">
                                    <div class="md-form">
                                        <input type="text" id="user-name" class="form-control">
                                        <label for="user-name" class="">昵称</label>
                                    </div>
                                </div>
                            </div>
                            <!--Grid column-->

                            <!--Grid column-->
                            <div class="col-md-6">
                                <div class="md-form">
                                    <div class="md-form">
                                        <input type="text" id="user-email" class="form-control">
                                        <label for="user-email" class="">微信</label>
                                    </div>
                                </div>
                            </div>
                            <!--Grid column-->

                        </div>
                        <!--Grid row-->

                        <!--Grid row-->
                        <div class="row">

                            <!--Grid column-->
                            <div class="col-md-12">

                                <div class="md-form">
                                    <textarea type="text" id="user-content" class="md-textarea form-control" rows="3"></textarea>
                                    <label for="user-content">内容</label>
                                </div>

                            </div>
                        </div>
                        <!--Grid row-->

                    </form>

                    <div class="text-center text-md-left mt-4">
                        <button class="btn pink-gradient btn-rounded waves-effect waves-light" onclick="submitMessage()">发送留言【实时】</button>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-4 col-xl-3">
                    <ul class="list-unstyled contact-icons">
                        <li>
                            <i class="fa fa-map-marker fa-2x orange-text"></i>
                            <p>上海市 徐汇区 淮海中路 地产大厦7楼</p>
                        </li>

                        <li>
                            <i class="fa fa-envelope fa-2x orange-text"></i>
                            <p>545544032@qq.com</p>
                        </li>

                        <li>
                            <i class="fa fa-wechat fa-2x orange-text"></i>
                            <p>VIPshaohan</p>
                        </li>
                    </ul>
                </div>
                <!--Grid column-->

            </div>

        </section>

    </div>


</main>
<!-- Main content -->

<!-- 网站底部 -->
<footer th:replace="~{common :: footer}"></footer>
<!-- /网站底部 -->

<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    //Animation init
    new WOW().init();

    /**
    * 用户提交留言
    */
    function submitMessage() {
        var username = $("#user-name").val();
        var email = $("#user-email").val();
        var message = $("#user-content").val();
        if(username.trim().length === 0){
            toastr.error("请填写您的姓名 ！");
            return;
        }
        if(email.trim().length === 0){
            toastr.error("请填写您的微信 ！");
            return;
        }
        if(message.trim().length === 0){
            toastr.error("留言内容不能为空 ！");
            return;
        }
        $.post("/api/common/message",{
            nickname:username,
            email:email,
            content:message
        },function(response){
            if (response.code ===  0){
                $('#user-name').val('');
                $('#user-email').val('');
                $('#user-content').val('');
                toastr.success("发送成功，随后会回复您！");
            }else {
                toastr.error("发送失败，请用其他方式联系我们！");
            }
        });
        return false;
    }
</script>

</body>

</html>